<template>
  <div class="curriculumScheduleBox">
      <!-- 搜索栏 start-->
      <div class="invite-sub">
          <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
          <span class="inviteSearch">
            <input type="text" placeholder="搜索">
            <img src="../../static/image/sousuo.png" alt="">
          </span>
      </div>
      <!-- 搜索栏 end-->
      <!-- 导航跳转栏 start-->
      <adminHeader></adminHeader>
      <!-- 导航跳转栏 end-->
        <!-- 课程情况 start-->
      <div class="courseSituation" >
        <!-- 正在进行 start-->
        <div class="courseDoing">
          <div class="public-header">
            <div class="public-header-ch">正在进行</div>
            <div class="public-header-en">ONGOING</div>
            <div class="public-header-line"></div>
          </div>
          <div class="courseTable">
            <table class="redTable">
              <thead>
                <tr>
                  <th class="tableOne"></th>
                  <th class="tableTwo">课程名称</th>
                  <th class="tableThree">讲师</th>
                  <th class="tableFour">开课日期</th>
                  <th class="tableFive">开课时间</th>
                  <th class="tableSix">人数</th>
                  <th class="tableSeven">管理操作</th>
                </tr>
              </thead>
              <tbody>
                 <tr v-if="doingList.length==0">
                   <td colspan="7" class="no-content">尚无课程信息，请先<router-link :to="{name:'course-management'}">创建课程</router-link>...</td>
                 </tr>
                <tr v-for="(doing,index) in doingList" :key="index">
                  <td></td>
                  <td>{{doing.courseName}}</td>
                  <td>{{doing.lecturer}}</td>
                  <td>{{doing.startTime | timeToYMD}}</td>
                  <td>{{doing.startTime | timeToHMS}}</td>
                  <td>{{doing.numberOfPeople}}</td>
                  <td>
                    <router-link :to="{name:'general-coursedetails',params:{id:doing.courseId}}"><span><img src="../../static/image/icon-detail.png" alt="">课程详情</span></router-link>
                    <router-link :to="{name:''}"><span><img src="../../static/image/icon-look.png" alt="">课程后台</span></router-link>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <el-pagination v-show="onGoingTotal!=0" background layout="prev, pager, next" :total="onGoingTotal" @current-change="onGoingCourse"></el-pagination>
        </div>
        <!-- 正在进行 end-->

        <!-- 即将开始 start-->
      <div class="courseDoing">
        <div class="public-header">
          <div class="public-header-ch">即将开始</div>
          <div class="public-header-en">COMING SOON</div>
          <div class="public-header-line"></div>
        </div>
        <div class="courseTable">
          <table>
            <thead>
              <tr>
                <th class="tableOne"></th>
                <th class="tableTwo">课程名称</th>
                <th class="tableThree">讲师</th>
                <th class="tableFour">开课日期</th>
                <th class="tableFive">开课时间</th>
                <th class="tableSix">人数</th>
                <th class="tableSeven">管理操作</th>
              </tr>
            </thead>
            <tbody>
               <tr v-if="soonList.length==0">
                   <td colspan="7" class="no-content">尚无课程信息，请先<router-link :to="{name:'course-management'}">创建课程</router-link>...</td>
                 </tr>
              <tr v-for="soon in soonList" :key="soon.courseId">
                <td></td>
                <td>{{soon.courseName}}</td>
                <td>{{soon.lecturer}}</td>
                <td>{{soon.startTime | timeToYMD}}</td>
                <td>{{soon.startTime | timeToHMS}}</td>
                <td>{{soon.numberOfPeople}}</td>
                <td>
                  <router-link :to="{name:'general-coursedetails',params:{id:soon.courseId}}"><span><img src="../../static/image/icon-detail.png" alt="">课程详情</span></router-link>
                  <a @click="closeCourse(soon.courseId)"><span><img src="../../static/image/icon-close.png" alt="">关闭课程</span></a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination v-show="comingSoonTotal!=0"  background layout="prev, pager, next" :total="comingSoonTotal" @current-change="comingSoonCourse"></el-pagination>
      </div>
        <!-- 即将开始 end-->

        <!-- 邀请中 start-->
        <div class="courseDoing">
          <div class="public-header">
            <div class="public-header-ch">邀请中</div>
            <div class="public-header-en">INVITING</div>
            <div class="public-header-line"></div>
          </div>
          <div class="courseTable">
            <table>
              <thead>
                <tr>
                  <th class="tableOne">
                    <input type="checkbox" label="全选" name="type" v-model="isCheckAll" @change="checkedAll">
                  </th>
                  <th class="tableTwo">课程名称</th>
                  <th class="tablethree">报名截止时间</th>
                  <th class="tableFour">开课日期</th>
                  <th class="tableFive">开课时间</th>
                  <th class="tableSix">人数</th>
                  <!-- <th class="tableSeven invited " >管理操作<router-link class="merge-invited" :to="{path:'initiate-invitation-page', params:{courseIdList: checkedLists}}">合并邀请</router-link></th> -->
                  <th class="tableSeven invited " @click="mergeInvite">管理操作<span class="merge-invited">合并邀请</span></th>
                </tr>
              </thead>
              <tbody>
                 <tr v-if="invitingList.length==0">
                   <td colspan="7" class="no-content">尚无课程信息，请先<router-link :to="{name:'course-management'}">创建课程</router-link>...</td>
                 </tr>
                <tr v-for="inviting in invitingList" :key="inviting.courseId">
                  <td>                   
                    <input v-if="inviting.courseStatus == 4" type="checkbox" :value='inviting.courseId' v-model="checkedLists">
                  </td>
                  <td>{{inviting.courseName}}</td>
                  <td>{{inviting.applyEndTime}}</td>
                  <td>{{inviting.startTime | timeToYMD}}</td>
                  <td>{{inviting.startTime | timeToHMS}}</td>
                  <td>{{inviting.numberOfPeople}}</td>
                  <td>
                    <router-link :to="{name:'',params:{id:inviting.courseId}}">
                      <span><img src="../../static/image/icon-detail.png" alt="">课程详情</span>
                    </router-link>
                    <router-link :to="{name:'invite-coursedetails',params:{id:inviting.courseId}}" v-if="inviting.courseStatus == 5">
                      <el-tooltip :popper-class="noteTipClass"
                          class="item" effect="dark"
                          content="请在开课前的24小时内审核" 
                          placement="left">
                        <span><img class="examine" src="../../static/image/shenhe.png" alt="">进入审核</span>
                      </el-tooltip>
                    </router-link>
                    <el-button @click="sigleInvite(inviting.courseId)" class="sigleInvite" v-if="inviting.courseStatus == 4">
                        <span><img src="../../static/image/icon-sign.png" alt="">邀 请</span>
                    </el-button>
                    <!-- <router-link :to="{name:'initiate-invitation-page',params:{id:inviting.courseId}}"  v-if="inviting.courseStatus == 4">
                      <span><img src="../../static/image/yaoqing.png" alt="">邀请</span>
                    </router-link> -->
                  </td>
                </tr> 
              </tbody>
            </table>
            <!-- <div>全选/取消 状态：{{ isCheckAll }}</div>
            <div>选中列表：{{ checkedLists }}</div> -->
          </div>
          <el-pagination v-show="invitingTotal!=0"  background layout="prev, pager, next" :total="invitingTotal"  @current-change="invitingCourse"></el-pagination>
        </div>
        <!-- 邀请中 end-->
        
        <!-- 已完成 -->
        <div class="courseDoing">
          <div class="public-header">
            <div class="public-header-ch">已完成</div>
            <div class="public-header-en">COMPLETED</div>
            <div class="public-header-line"></div>
          </div>
          <div class="courseTable">
            <table>
              <thead>
                <tr>
                  <th class="tableOne"></th>
                  <th class="tableTwo">课程名称</th>
                  <th class="tableThree">讲师</th>
                  <th class="tableFour">开课日期</th>
                  <th class="tableFive">开课时间</th>
                  <th class="tableSix">人数</th>
                  <th class="tableSeven">管理操作</th>
                </tr>
              </thead>
              <tbody>
                 <tr v-if="completeList.length==0">
                   <td colspan="7" class="no-content">尚无课程信息,请先<router-link :to="{name:'course-management'}">创建课程</router-link>...</td>
                 </tr>
                <tr v-for="(complete,content) in completeList" :key="content">
                  <td></td>
                  <td>{{complete.courseName}}</td>
                  <td>{{complete.lecturer}}</td>
                  <td>{{complete.startTime | timeToYMD}}</td>
                  <td>{{complete.startTime | timeToHMS}}</td>
                  <td>{{complete.numberOfPeople}}</td>
                  <td>
                    <router-link :to="{name:'',params:{id:complete.curseId}}"><span><img src="../../static/image/icon-detail.png" alt="">课程详情</span></router-link>
                    <router-link :to="{name:''}"><span><img src="../../static/image/icon-look.png" alt="">查看报告</span></router-link>
                  </td>
                </tr>           
              </tbody>
            </table>
          </div>
          <el-pagination v-show="completeTotal!=0" background layout="prev, pager, next" :total="completeTotal" @current-change="completedCourse"></el-pagination>
        </div>
        <!-- 已完成 end-->
      </div>
      <!-- 课程情况 end-->  
  </div>
</template>
<script> 
    import adminHeader from '../components/adminHeader.vue'
    export default {
      components:{
      adminHeader:adminHeader
      },
      data(){
          return{
            //审核提示
            noteTipClass:'page-login-noteTipClass',
            // 是否全选
            isCheckAll:false,
            //
            checkedLists:[],
           
            //正在进行中
             onGoingTotal:0,
            //即将进行
            comingSoonTotal:0,
            //邀请中
            invitingTotal:0,
            //已完成
            completeTotal:0,
            //正在进行中
            doingList:[
            ],
            //即将进行
            comingSoonTal:0,
            soonList:[ 
            ],
            //邀请中
            invitingList:[ ],            
            //已完成
            completeList:[
            
            ],
          }
        },
        methods:{
          //单个邀请
            sigleInvite(courseId){
              console.log(courseId)
                let arr = [];
                if (courseId != '') {
                    arr.push(courseId)
                    sessionStorage.setItem('courseArr', JSON.stringify(arr))
                    this.$router.push({path:'initiate-invitation-page'}) 
              }
                // let data = {
                //     courseIdList:this.checkedLists,
                // }
                // console.log(data)
                // this.$http.inviteCourseList(data,(res)=>{
                //     if(res.errCode == 0){
                //         sessionStorage.setItem('data', JSON.stringify(res.data))
                //         this.$router.push({path:'initiate-invitation-page'}) 
                //     }
                //     console.log(res)
                // },(errRes)=>{
                //     console.log(errRes)
                // })
            },
          //合并邀请
          mergeInvite:function(){
           console.log(this.checkedLists)
              if (this.checkedLists.length > 0) {
                  sessionStorage.setItem('courseArr', JSON.stringify(this.checkedLists))
                  this.$router.push({path:'initiate-invitation-page'}) 
              }
            // let data={
            //   courseIdList: this.checkedLists
            // }
            // console.log(data)
            // this.$http.inviteCourseList(data,(res)=>{
            //  if(res.errCode == 0){
            //    sessionStorage.setItem('data', JSON.stringify(res.data))
            //    this.$router.push({path:'initiate-invitation-page'})
               
            //  }
            // },(errRes)=>{
             
            // })
          },
          // 正在进行
          onGoingCourse:function(currentPage = 1){
            let data = {
              // 当前页码
              pageNow: currentPage,
              // 每页显示数据条数
              pageSize: 5,

            }
            this.$http.onGoingCourse(data,(res)=>{
              this.doingList = res.data.adminAllCourseList;
              this.onGoingTotal = res.data.count;
              console.log(res)
            },(errRes)=>{
              console.log(errRes)
            })
          },

          //即将开始
          comingSoonCourse:function(currentPage = 1){
           let data = {
              // 当前页码
              pageNow: currentPage,
              // 每页显示数据条数
              pageSize: 5,

            }
            this.$http.comingSoonCourse(data,(res)=>{
              this.soonList = res.data.adminAllCourseList;
              this.comingSoonTotal = res.data.count;
             console.log(res)
            },(errRes)=>{
            console.log(errRes)
            })
          },
        //邀请中
         invitingCourse:function(currentPage = 1 ){
            let data = {
              // 当前页码
              pageNow: currentPage,
              // 每页显示数据条数
              pageSize: 5,

            }

          this.$http.invitingCourse(data,(res)=>{
            this.invitingList=res.data.adminAllInvitingCourseList;
            this.invitingTotal=res.data.count;
             
           },(errRes)=>{
              // console.log(errRes)
           })
         },
          //已完成
          completedCourse:function(currentPage = 1){
             let data = {
              // 当前页码
              pageNow: currentPage,
              // 每页显示数据条数
              pageSize: 5,

            }
            this.$http.completedCourse(data,(res)=>{
              this.completeList=res.data.adminAllCourseList;
              this.completeTotal=res.data.count;
              console.log(res)

            },(errRes)=>{
              console.log(errRes)
            })
          },
          //全选
          checkedAll () {

            // 判断 全选/反选 是否点击
            if (this.isCheckAll) {
                let arr = []
         
                // 循环全部数据并push到一个数组中
                // this.invitingList.forEach(element => {
                //   if(element.courseStatus==5){
                //     delete element.courseId
                //   }
                //     arr.push(element.courseId)
                //     console.log(element)
                // });
                let tempArr = JSON.parse(JSON.stringify(this.invitingList));
                for (const key in tempArr) {
                  if (tempArr.hasOwnProperty(key)) {
                    const element = tempArr[key];
                    if (element.courseStatus==5) {
                      tempArr.splice(key,1)
                    } else{
                      arr.push(element.courseId)
                    }
                    
                  }
                }

                console.log(arr)
                // 选中列表赋值，此时的arr已经是全部数据了，直接赋值就等于选中所有checkbox
                this.checkedLists = arr
            } else {
                // 如果 全选/反选 为假，则选中列表初始化
                this.checkedLists = []
            }
            console.log(this.checkedLists)
          },

          // 关闭课程
          closeCourse(courseId){
            let data = {
              courseId : courseId
            }
            console.log(data)
            this.$http.closeCourse(data,(res)=>{
              if(res.errCode == 0){
                 this.$message.success('已关闭课程');
              }
              this.$router.push({path:'curriculum-schedule'})
              console.log(res)
            },(errRes)=>{
              console.log(errRes)
            })
          }
        }, 
         watch: {
            // 监听选中列表属性，当选中列表发生变化时，会运行此方法
            // checkedLists (newValue, oldValue) {
            //   console.log(this.invitingList)
            //     // 每次运行时，判断当前选中列表中的数组个数是否等于全部数据的数组个数，如果到某一时刻全等，则全选按钮为选中
            //     if (newValue.length === this.invitingList.length) {
            //         this.isCheckAll = true
            //     } else {
            //         // 否则为取消
            //         this.isCheckAll = false
            //     }
            // }
        },     
        created(){

        },
        mounted(){ 
          this.onGoingCourse();
          this.comingSoonCourse();
          this.invitingCourse();
          this.completedCourse();
        },
    }
</script>
    